<template>
  <div class="myorder">
    <!-- 导航栏 -->
    <van-nav-bar
      title="订单结算"
      left-text="返回"
      left-arrow
      @click-left="onClickLeft"
    />

    <!-- 封图 -->
    <div class="photo">
      <img src="../assets/my/Snipaste_2021-11-17_18-48-54.png" alt="" />
    </div>

    <!-- 订单阶段 -->
    <van-tabs v-model="active" animated sticky @change="changeOrderStatus">
      <!-- 全部、进行中、已完成 -->
      <van-tab
        v-for="(item, index) in tabsData"
        :key="index"
        :title="item.title"
      >
        <div class="all">
          <div class="allbox" v-for="(v, i) in orderData" :key="i">
            <!-- 订单编号 -->
            <div class="start">
              {{ v.oid }}

              <div class="state" v-if="v.status === 2">已完成</div>
              <div class="state" v-else @click="confirmReceive(v, i)">
                确认收货
              </div>
              <div class="icon" @click="deleteOrder(v.oid)">
                <van-icon name="delete-o" />
              </div>
            </div>

            <div v-for="(v1, i1) in v.showProdust" :key="i1">
              <!-- 订单商品 -->
              <van-card
                :num="v1.count"
                :price="v1.price"
                :desc="v1.rule"
                :title="v1.name"
                :thumb="v1.smallImg"
              />
            </div>

            <div class="showmore" v-if="v.showMore" @click="showMoreProduct(v)">
              显示更多商品信息
              <van-icon name="arrow-down" />
            </div>

            <!-- 合计 -->
            <div class="total">
              <!-- 时间 -->
              <div class="time">{{ v.date | formatDate }}</div>

              <!-- 计算 -->
              <div class="totalbox">
                <!-- 数量 -->
                <div class="quantity">共计 {{ v.count }} 件商品</div>

                <!-- 金额 -->
                <div class="money">
                  总金额：<span>&yen;{{ v.total }}</span>
                </div>
              </div>

              <i class="circle circle-left"></i>
              <i class="circle circle-right"></i>
            </div>
          </div>

          <!-- 没有订单的空状态 -->
          <van-empty
            v-show="orderData.length === 0"
            description="没有订单数据！"
          ></van-empty>
        </div>
      </van-tab>
    </van-tabs>
  </div>
</template>

<script>
export default {
  name: "Myorder",

  data() {
    return {
      active: 0,

      //订单阶段
      tabsData: [
        {
          title: "全部",
        },
        {
          title: "进行中",
        },
        {
          title: "已完成",
        },
      ],

      //订单数据
      orderData: [],
      proData: [],

      //是否显示更多商品数据
      isShowMore: false,

      //初始显示的3条商品数据
      showCount: 3,
    };
  },

  created() {
    this.getOrderData();
  },

  methods: {
    onClickLeft() {
      this.$router.push({ name: "Arrorder" });
    },

    //获取我的订单数据
    getOrderData() {
      this.axios({
        method: "get",
        url: "/findOrder",
        params: {
          status: this.active,
        },
      })
        .then((res) => {
          // 

          if (res.data.code === 700) {
            return this.$router.push({ name: "Login" });
          }

          if (res.data.code === 70000) {
            //获取所有订单编号
            let orderNos = [];
            res.data.result.forEach((v) => {
              v.small_img = v.smallImg;
              if (orderNos.indexOf(v.oid) === -1) {
                orderNos.push(v.oid);
              }
            });

            // 

            //订单数据结构
            // [
            //   oid: 订单编号,
            //   status: 订单状态,
            //   date: 订单日期,
            //   count: 订单商品数量
            //   total: 订单总金额,
            //   products: [
            //     商品数据1,
            //     商品数据2
            //   ]
            // ]

            let orderData = [];
            orderNos.forEach((v) => {
              let order = {
                oid: v,
                count: 0,
                total: 0,
                // 订单所有数据
                products: [],
                //初始显示订单商品数据
                showProdust: [],
              };
              res.data.result.forEach((item) => {
                if (v === item.oid) {
                  if (order.products.length === 0) {
                    order.status = item.status;
                    order.date = item.createdAt;
                  }

                  order.count += item.count;
                  order.total += item.count * item.price;

                  order.products.push(item);
                }
              });
              orderData.push(order);
            });

            //处理控制显示更多按钮的属性
            orderData.forEach((v) => {
              v.showMore = v.products.length > 3;
              v.showProdust.push(...v.products.slice(0, this.showCount));
            });

            //按照订单日期排序
            // orderData.sort((a,b) => {
            //   return new Date(b.date).getTime() - new.Date(a.date).getTime();
            // })

            this.orderData = orderData;
            // 
          }
        })
        .catch((err) => {
          
        });
    },

    //切换订单状态
    changeOrderStatus() {
      // 
      this.getOrderData();
    },

    //确认收货
    confirmReceive(v, index) {
      this.axios({
        method: "post",
        url: "/receive",
        data: {
          oid: v.oid,
        },
      })
        .then((res) => {
          // 

          if (res.data.code === 700) {
            return this.$router.push({ name: "Login" });
          }

          this.$toast(res.data.msg);
          if (res.data.code === 80000) {
            if (this.activeIndex === 1) {
              //如果当前时进行中的订单数据, 则移除当前页面的数据
              this.orderData.splice(index, 1);
            } else if (this.activeIndex === 0) {
              v1.status = 2;
            }
          }
        })
        .catch((err) => {
          
        });
    },

    //显示更多商品
    showMoreProduct(item) {
      item.showProdust.push(...item.products.slice(this.showCount));
      item.showMore = false;
    },

    //删除订单
    deleteOrder(oid, index) {
      this.$dialog
        .confirm({
          title: "提示",
          message: "是否确认删除该订单？",
        })
        .then(() => {
          this.axios({
            method: "post",
            url: "/removeOrder",
            data: {
              oid,
            },
          })
            .then((res) => {
              
              if (res.data.code === 700) {
                return this.$router.push({ name: "Login" });
              }

              this.$toast(res.data.msg);

              if (res.data.code === 90000) {
                this.orderData.splice(index, 1);
              }
            })
            .catch((err) => {
              
            });
        })
        .catch((err) => {
          
        });
    },
  },
};
</script>

<style lang="less" scoped>
// 导航栏
/deep/.van-nav-bar {
  position: fixed;
  width: 100%;
  top: 0;
  height: 40px;
}

/deep/.van-nav-bar__title {
  color: #37343b;
  font-weight: 600;
}

/deep/.van-nav-bar__text {
  color: #37343b;
  font-weight: 600;
}

/deep/.van-nav-bar .van-icon {
  color: #37343b;
}

// 封图
.photo {
  width: 100%;
  height: 200px;
  position: relative;
  top: 40px;
}

.photo img {
  width: 100%;
  height: 200px;
}

// 订单阶段
.all {
  width: 346px;
  margin: auto;
  border-radius: 10px;
  padding: 0 16px;
}

/deep/.van-tab__text--ellipsis {
  color: #37343b;
  font-weight: 600;
}

/deep/.van-tabs__line {
  background-color: #eeab64;
}

//全部
.allbox {
  background-color: #fff;
  padding: 0 14px 0 14px;
  margin-top: 10px;
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
}

.start {
  width: 100%;
  height: 30px;
  line-height: 30px;
  display: flex;
  align-items: center;
  padding: 10px 0 0 0;
  font-size: 14px;
  color: #37343b;
}

.state {
  width: 60px;
  margin-left: auto;
  font-size: 12px;
}

.showmore {
  width: 100%;
  height: 20px;
  line-height: 20px;
  color: #999999;
  padding: 10px 0 0 0;
  text-align: center;
}

//合计
.total {
  width: 320px;
  background-color: #fff;
  border-top: 1px dashed #999999;
  margin: auto;
  padding: 10px 0 0 0;
  display: flex;
  flex-wrap: wrap;
}

.time {
  width: 100%;
  height: 20px;
  line-height: 20px;
  color: #999999;
}

.totalbox {
  width: 100%;
  display: flex;
  align-items: center;
  padding: 0 10px 0 0;
}

.quantity {
  width: 100px;
  height: 30px;
  line-height: 30px;
}

.money {
  width: 100px;
  height: 30px;
  line-height: 30px;
  margin-left: auto;
  & span {
    color: #dcab77;
    font-size: 16px;
    font-weight: 600;
  }
}

//缺角
.circle {
  position: relative;
  bottom: 70px;
  width: 20px;
  height: 20px;
  background-color: #eaeaea;
  border-radius: 50%;
}

.circle-left {
  right: 22px;
}

.circle-right {
  left: 300px;
}
</style>